<template>
	<div class="about">
		<el-container>
			<el-main>
				<div style="height: 420px;width: 100%;background-color: white;">
				<p class="item-top">
					<img :src="res.youhaohuo.title.pic" alt="" /><small>与品质好货不期而遇</small>
				</p>
				<el-row style="margin-top: 60px;">
					<el-col :span="4" v-for="(item, index) in res.youhaohuo.good" :key="index">
						<img class="image" :src="item.pic" alt="" />
						<p style="font-weight: 300;">{{ item.p1 }}</p>
						<small style="color: #CCCCCC;">{{ item.p2 }}</small><br />
						<br />
						<i :class="item.i" style="color: cornflowerblue;"><span style="color: cornflowerblue;">{{ item.span }}</span></i>
					</el-col>
				</el-row>
				</div>
				
			<div style="height: 438px;width: 100%;background-color: white;">
				<h1 style="color:orangered;font-weight: 300;">热卖单品</h1>
				<p> <a href="#" class="one4">
					<span style="color: gainsboro;font-size: 14px;margin-left: 20px;" v-for="(item, index) in res.youhaohuo.remaidanpin" :key="index">{{ item }}</span>
				</a></p>
				<el-row class="item-margin">
					<el-col :span="5" class="remai" v-for="(item, index) in res.youhaohuo.remaidanpinjianjie1" :key="index">
						<img class="item-remai" :src="item.pic" alt="" />
						<p>
							<span class="item-span">{{ item.span }}</span><small class="item-small">{{ item.small }}</small>
						</p>
					</el-col>
				</el-row>
				<el-row class="item-margin">
					<el-col :span="5" class="remai" v-for="(item, index) in res.youhaohuo.remaidanpinjianjie2" :key="index">
						<img class="item-remai" :src="item.pic" alt="" />
						<p>
							<span class="item-span">{{ item.span }}</span><small class="item-small">{{ item.small }}</small>
						</p>
					</el-col>
				</el-row>
</div>



<div style="height: 800px;width: 100%;background-color: white;">
				<h1 style="color:orangered;font-weight: 300;">猜你喜欢</h1>
				<el-row class="item-margin">
					<el-col :span="5" class="remai" v-for="(item, index) in res.youhaohuo.cainixihuanjianjie1" :key="index">
						<img :src="item.pic" class="item-remai" alt="" />
						<p>
							<span class="item-span">{{ item.span }}</span><small class="item-small">{{ item.small }}</small>
						</p>
					</el-col>
				</el-row>
				</div>
			</el-main>
		</el-container>
	</div>
</template>
<script>
	let dataSource = {
		youhaohuo: {
			title: {
				pic: require("../assets/good.png"),
			},
			good: [{
					pic: require("../assets/good1.jpg"),
					p1: "大豆家 方头奶奶鞋",
					p2: "一脚蹬设计,方便日常穿",
					i: "el-icon-shopping-cart-2",
					span: "758人已购买",
				},
				{
					pic: require("../assets/good2.jpg"),
					p1: "宝佳路转角水槽",
					p2: "整体效果整洁表面亮丽",
					i: "el-icon-shopping-cart-2",
					span: "58人已购买",
				},
				{
					pic: require("../assets/good3(1).jpg"),
					p1: "杨丽影代言的高跟尖头鞋",
					p2: "高跟细皮轻松",
					i: "el-icon-shopping-cart-2",
					span: "165人已购买",
				},
				{
					pic: require("../assets/good4.jpg"),
					p1: "喜来登黑天鹅蛋糕",
					p2: "奶味十足食材新鲜不过期",
					i: "el-icon-shopping-cart-2",
					span: "28人已购买",
				},
				{
					pic: require("../assets/good5.jpg"),
					p1: "汽车变道安全辅助器",
					p2: "为安全着想 买它！",
					i: "el-icon-shopping-cart-2",
					span: "358人已购买",
				},
				{
					pic: require("../assets/good6.jpg"),
					p1: "PUMA复古老爹鞋",
					p2: "运动穿及百搭都可穿",
					i: "el-icon-shopping-cart-2",
					span: "58人已购买",
				},
			],
			remaidanpin: ["耐克", "防晒霜", "女t恤", "运动鞋", "新款包包","面膜","苹果","牛仔裤","连衣裙","小米手机","大码女装","口红","杯子","洗面奶","安慕希酸奶","男士上衣","手表","项链","Dior"],
			remaidanpinjianjie1: [{
					pic: require("../assets/re1.jpg"),
					span: "￥89",
					small: "月销3959笔",
				},
				{
					pic: require("../assets/re2.jpg"),
					span: "￥234",
					small: "月销680笔",
				},
				{
					pic: require("../assets/re3.jpg"),
					span: "￥69",
					small: "月销857笔",
				},
				{
					pic: require("../assets/re4.jpg"),
					span: "￥449",
					small: "月销2259笔",
				},
				{
					pic: require("../assets/re5.jpg"),
					span: "￥252",
					small: "月销126笔",
				},
			],
			remaidanpinjianjie2: [{
					pic: require("../assets/re6.jpg"),
					span: "￥72",
					small: "月销2459笔",
				},
				{
					pic: require("../assets/re7.jpg"),
					span: "￥199",
					small: "月销172笔",
				},
				{
					pic: require("../assets/re8.jpg"),
					span: "￥162",
					small: "月销1456笔",
				},
				{
					pic: require("../assets/re9.jpg"),
					span: "￥256",
					small: "月销399笔",
				},
				{
					pic: require("../assets/re10.jpg"),
					span: "309",
					small: "月销392笔",
				},
			],

			cainixihuanjianjie1: [{
					pic: require("../assets/re1.jpg"),
					span: "￥289",
					small: "月销39笔",
				},
				{
					pic: require("../assets/re2.jpg"),
					span: "￥89",
					small: "月销99笔",
				},
				{
					pic: require("../assets/re3.jpg"),
					span: "￥912",
					small: "月销399笔",
				},
				{
					pic: require("../assets/re4.jpg"),
					span: "￥23",
					small: "月销3959笔",
				},
				{
					pic: require("../assets/re10.jpg"),
					span: "￥9",
					small: "月销59笔",
				},
			],
		},
	};
	export default {
		data() {
			return {
				res: dataSource,
			};
		},
	};
</script>
<style scoped>
	

	.el-col{
		cursor: pointer;
	}
	.item-top {
		text-align: left;
		position: relative;
		width: 100%;
		height: 20px;
	}

	.item-top img {
		position: absolute;
		top: 23px;
		height: 26px;
		width: 100px;
	}

	.item-top small {
		display: inline-block;
		vertical-align: inherit;
		color: #999;
		position: relative;
		top: 28px;
		left: 130px;
	}

	.image {
		width: 180px;
		height: 180px;
	}

	.item-margin {
		width: 1200px;
		margin: 0 auto;
	}

	.item-margin .remai {
		width: 239px;
		height: 352px;
		border: 1px solid #cccccc;
		position: relative;
		z-index: 1;
		margin: -1px 0 0 -1px;
	}

	.item-margin .remai:hover {
		border: 1px solid #f40;
		z-index: 2;
	}

	.item-margin .item-remai {
		width: 197px;
		height: 197px;
		padding: 20px;
		float: left;
		cursor: pointer;
	}

	.item-margin .remai p {
		height: 22px;
		line-height: 22px;
	}

	.item-margin .remai p .item-span {
		font-size: 24px;
		color: #f40;
		display: inline-block;
		padding-top: 70px;
		padding-right: 70px;
	}

	.item-margin .remai p .item-small {
		color: #999;
		font-family: arial;
	}
	a.one4{
		text-decoration: none;
	}
	a.one4[data-v-039c5b43]{
		color: red;
	}
</style>
